<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

	</head>
	<body>
		<div id="app">
			<div id="mapChart" >

			</div>
			<template>
				<el-table
			:data="tableData"
			style="width: 100%">
			<el-table-column
			  prop="date"
			  label="日期"
			  width="180">
			</el-table-column>
			<el-table-column
			  prop="name"
			  label="姓名"
			  width="180">
			</el-table-column>
			<el-table-column
			  prop="address"
			  label="地址">
			</el-table-column>
		  </el-table>
			</template>

		</div>
	</body>
</html>
<style type="text/css">
	#mapChart {
		width: 1000px;
		height: 1000px;
		margin: auto;
	}
</style>
<!-- <script src="./echarts.min.js"></script> -->
<script src="https://lib.baomitu.com/echarts/4.9.0-rc.1/echarts.js" type="text/javascript" charset="utf-8"></script>
<script src="./china.js"></script>
<script src="./city.js"></script>
<script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
  var app=  new Vue({
      el: '#app',
      data: function() {
        return { visible: false ,
			tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]}
      }
    })
  </script>
<script>


	// var a = [1,2,3,4,5,6,7,8,9,0]
// var b;
// 不改变元素组
//  b=a.slice(1,2)
//  b=a.join(',')
// b=a.concat([1])
// b=a.shift()
// b=a.unshift('g')
// b=a.pop()
// b=a.push('g')
// b=a.reverse()
// b=a.sort()
// b=a.splice(1,3)

// console.log(a);
// console.log(b);

// echarts地图
var  planePath= 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
console.log('echarts',echarts);
var geoCoordMap=cityList()
console.log('geoCoordMap',geoCoordMap);

var Mapseries=[]

var mapList=[[{name: "杭州"}, {name: "北京", value: 600}],
[{name: "杭州"}, {name: "上海", value: 10}],
[{name: "杭州"}, {name: "广州", value: 1000}],
[{name: "杭州"}, {name: "深圳", value: 30}],
[{name: "杭州"}, {name: "杭州", value: 200}]]
var mapChart = echarts.init(document.getElementById('mapChart'));

console.log('mapChart',mapChart);
initMapChart(mapList)
function convertData(data){
	var res = [];
	console.log('data',data)
	for(var i = 0;i<data.length;i++){
		var dataItem=data[i]
		var fromCoord = geoCoordMap[dataItem[0].name]
		var toCoord = geoCoordMap[dataItem[1].name]
		if(fromCoord && toCoord){
			var obj = {
			        fromName: dataItem[0].name,
			        name: dataItem[1].name,
			        coords: [fromCoord, toCoord],
			        value: dataItem[1].value,
			    }
			res.push(obj);
		}
	}
	return res
}

function initMapChart(map_data){
	console.log('map_data',map_data)
	sizeMap(map_data)
	
	console.log('Mapseries',Mapseries)
	mapChart.setOption({
		 backgroundColor:'#404a59',// 地图背景色
		 tooltip : {
		 	trigger : 'item',
			formatter: function(params, ticket, callback) {
					//根据业务自己拓展要显示的内容
					var res = "";
					var name = params.name;
					var value = params.value;
					
					if(params.componentSubType=='lines'){
						res = "<span style='color:#fff;'>" + params.data.fromName + '-'+params.data.name +"</span>" ;
					}
					if(params.componentSubType=='effectScatter'){
						if(value[3]== value[4]){
							res = "<span style='color:#fff;'>" + params.data.name +"</span>" ;
						}else{
							res = "<span style='color:#fff;'>" + name + "</span><br/>发货量：" + value[2];
						}
					}
					return res;
			}
		 },
		  geo: {
		        map: 'china',
		        aspectScale: 0.75, //长宽比
		        zoom: 1.22,
				label: {
		            emphasis: {
		                show: false,
		                textStyle: {
		                    color: '#fff',
		                }
		             },
		        },
		        roam: false,
		        itemStyle: {
		            normal: {
		                borderColor: '#09aed2',
		                areaColor: 'rgba(19,95,221,0.4)',
		                borderWidth: 1,
		             },
		            emphasis: {
		                areaColor: 'rgba(19,95,221,0.4)',
		                color: '#fff',
		                 label: {
		                    show: false
		                }
		            }
		        }
		    },
		series: Mapseries
	})
}
function sizeMap(map_data){
	
	console.log('sizeMap',map_data)
	var color = ['#71ffa9', '#feb058', '#5f9bfb']; //航线的颜色随机航线颜色
	[
		[map_data[0][0].name,map_data]
	].forEach(function(item,i){
		Mapseries.push({
                        type: 'lines',
                        zlevel: 1,
                        effect: {
                            show: true,
                            period:  10, //箭头指向速度，值越小速度越快
                            trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol:planePath, //箭头图标
                            symbolSize: 15, //图标大小
                        },
                        lineStyle: {
                            normal: {
                                color: '#00ffff', //线的颜色
                                width: 1,
                                opacity: 0.6,
                                curveness: 0.2
                            }
                        },
                        data: convertData(item[1])
                    }, {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    color: "#fff"
                                },
                                show: true,
                                position: 'right',
                                formatter: '{b}'

                                //  function (params) { //圆环显示文字
                                //     console.log('params1 :>> ', params);
                                //     return '';
                                // },
                            },

                        },
                        symbolSize: function (val) {
                            var a = Math.floor(val[2] / 5)
                            if (a > 15) {
                                a = 15
                            }
                            if (a < 3) {
                                a = 3
                            }
                            if (val[3] == val[4]) {
                                a = 18
                            }
                            return a;
                        },
                        itemStyle: {
                            normal: {
                                color: '#00ffff',
                            },
                            emphasis: {
                                areaColor: '#2B91B7'
                            }
                        },
                        data: item[1].map(function (dataItem) {
							console.log('dataItem',dataItem)
                            return {
                                symbol: 'circle',
                                name: dataItem[1].name,
                                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value], [dataItem[0].name], [dataItem[1].name]),
                            };
                        })
                    })
	})
}

</script>

